<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>车辆信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../plugins/layui/css/myPage.css">
</head>
<body class="layui-layout-body">

<blockquote class="layui-elem-quote"  >
                <div class=" layui-form" >
                    <div class="layui-form-item"  >


                        <div class="layui-input-inline" style="width: 100px">
                            <label class="layui-form-label">所属部门</label>
                            <label class="layui-form-label">车牌号</label>
                        </div>

                        <div class="layui-input-inline">
                            <select name="city" lay-verify="required" id="searchSsbm" lay-search>
                                <option value=""></option>
                            </select>
                            <select class="layui-input-inline" id="searchCph" lay-search>

                                <option value=""></option>
                            </select>

                        </div>

                        <div class="layui-input-inline" style="width: 100px">
                            <label class="layui-form-label">主(挂)车车号</label>
                            <label class="layui-form-label">档案编号</label>
                        </div>

                        <div class="layui-input-inline">
                            <select class="layui-input-inline" id="searchZgcch" lay-search>

                                <option value=""></option>
                            </select>
                            <select class="layui-input-inline" id="searchDabh" lay-search>

                                <option value=""></option>
                            </select>


                        </div>

                        <div class="layui-input-inline" style="width: 80px">
                            <button class="layui-btn layui-btn-normal" id="search">点击搜索</button>
                            <button type="button" class="layui-btn layui-btn-normal" id="all">显示全部</button>
                        </div>
                        <div class="layui-input-inline" style="width: 100px; position: absolute;right: 15% ">
                            <button class="layui-btn layui-btn-warm" style="width: 100px">30天内过期</button>

                            <button class="layui-btn layui-btn-danger" style="width: 100px">已经过期</button>

                        </div>
                        <div class="layui-input-inline " style=" width:10%; position: absolute;right: 0 ">
                            <button class="layui-btn layui-btn-normal" id="newCar">新增车辆信息</button>

                        </div>

                    </div>
                </div>
            </div>
</blockquote>
        <div class="layui-row">
            <div class="layui-col-xs12">
                <script type="text/html" id="opera">
                    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">查看</a>

                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
                </script>
                <table id="table" lay-filter="Table"></table>
                <script id="yyzqz" type="text/html">
                    {{#  if(dateToToday(d.yyzyxq) == '0'){ }}
                    <div style="background: orangered;">{{ d.yyzyxq }}</div>
                    {{#  } else if(dateToToday(d.yyzyxq) == '2')  { }}
                    <div style="background: #ffb803;">{{ d.yyzyxq }}</div>
                    {{#  } else if(dateToToday(d.yyzyxq) == '4')  { }}
                    <div  >{{ "" }}</div>
                    {{# }else { }}
                    <div style="">{{ d.yyzyxq }}</div>
                    {{#  } }}
                </script>

                <script id="jdcjtsgzrxyxq" type="text/html">
                    {{#  if(dateToToday(d.jdcjtsgzrxyxq) == '0'){ }}
                    <div style="background: orangered;">{{ d.jdcjtsgzrxyxq }}</div>
                    {{#  } else if(dateToToday(d.jdcjtsgzrxyxq) == '2')  { }}
                    <div style="background: #ffb803;">{{ d.jdcjtsgzrxyxq }}</div>
                    {{#  } else if(dateToToday(d.jdcjtsgzrxyxq) == '4')  { }}
                    <div  >{{ "" }}</div>
                    {{# }else { }}
                    <div style="">{{ d.jdcjtsgzrxyxq }}</div>
                    {{#  } }}
                </script>

                <script id="dszzrxyxq" type="text/html">
                    {{#  if(dateToToday(d.dszzrxyxq) == '0'){ }}
                    <div style="background: orangered;">{{ d.dszzrxyxq }}</div>
                    {{#  } else if(dateToToday(d.dszzrxyxq) == '2')  { }}
                    <div style="background: #ffb803;">{{ d.dszzrxyxq }}</div>
                    {{#  } else if(dateToToday(d.dszzrxyxq) == '4')  { }}
                    <div  >{{ "" }}</div>
                    {{# }else { }}
                    <div  >{{ d.dszzrxyxq }}</div>
                    {{#  } }}
                </script>

                <script id="ssbmName" type="text/html">
                    {{#   }}
                    <div>{{ d.ssbm }}</div>
                    {{#  }}
                </script>
            </div>

</div>
<script src="../plugins/layui/layui.js"></script>
<script src="../js/config.js"></script>
<script src="../js/tools.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['form' ,'table','jquery','layer','element'], function(){
        var form = layui.form;
        var table = layui.table;
        var $ = layui.$;
        var element = layui.element;
        var layer = layui.layer;
        var tableheight=  'full-130';
        var tablewidth = 75;
        var currentPage = 1;
        $("#carMana").addClass("layui-this");
        $("#side").load("../side.html");

        //渲染部门select
        $.ajax({
            url: contextPath+"/dept",
            type: "GET",
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            success: function(res) {

                for(var i in res.list){

                    var option = "<option value='"+ res.list[i].name+ "'>"+res.list[i].name+"</option>";

                    $("#searchSsbm").append(option);
                };
                form.render('select');
            }

        });

        $.ajax({
            url: contextPath+"/car",
            type: "GET",
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            success: function(res) {
                for(var i in res.list){
                    var option = "<option value='"+ res.list[i].cph+ "'>"+res.list[i].cph+"</option>";
                    $("#searchCph").append(option);
                };
                form.render('select');
            }
        });

        $.ajax({
            url: contextPath+"/car",
            type: "GET",
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            success: function(res) {
                for(var i in res.list){
                    var option = "<option value='"+ res.list[i].zgcch+ "'>"+res.list[i].zgcch+"</option>";
                    $("#searchZgcch").append(option);
                };
                form.render('select');
            }
        });

        $.ajax({
            url: contextPath+"/car",
            type: "GET",
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            success: function(res) {
                for(var i in res.list){
                    var option = "<option value='"+ res.list[i].dabh+ "'>"+res.list[i].dabh+"</option>";
                    $("#searchDabh").append(option);
                };
                form.render('select');
            }
        });
        //table实例
        $("#all").on('click',function () {
            $.ajax({
                url: contextPath+"/car",
                type: "GET",
                contentType:"application/json;charset=utf-8",
                dataType:"json",
                success: function(res) {
                    table.render({
                        elem: '#table'
                        ,height:tableheight
                        ,data:res.list
                            ,page: {
                                    curr: 1 //重新从第 1 页开始
                                } //开启分页
                        ,limit:10
                        ,cellMinWidth: tablewidth
                        ,cols: [[ //表头
                            { type:'numbers', title: '序号',  align:'center'  }
                            ,{field: 'cph', title: '车牌号' ,align:'center'}
                            ,{field: 'zgcch', title: '主(挂)车车号',align:'center'}
                            ,{field: 'dabh', title: '档案编号' ,align:'center'}
                            ,{field: 'ssbm', title: '所属部门' ,  align:'center'}



                            ,{templet: '#yyzqz', title: '营运证期止' ,  align:'center'}
                            ,{templet: '#jdcjtsgzrxyxq', title: '交强险期止'    ,align:'center'}
                            ,{templet: '#dszzrxyxq', title: '第三者责任险期止' ,  align:'center'}
                            ,{ title:'操作', align:'center', toolbar: '#opera'}
                        ]]
                    });
                }

            });

        });

        $.ajax({
            url: contextPath+"/car",
            type: "GET",
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            success: function(res) {
                table.render({
                    elem: '#table'
                    ,height:tableheight
                    ,data:res.list
                        ,page: {
                                    curr: currentPage //重新从第 1 页开始
                                } //开启分页
                    ,limit:10
                    ,cellMinWidth: tablewidth
                    ,cols: [[ //表头
                        { type:'numbers', title: '序号',  align:'center'  }
                        ,{field: 'cph', title: '车牌号' ,align:'center'}
                        ,{field: 'zgcch', title: '主(挂)车车号',align:'center'}
                        ,{field: 'dabh', title: '档案编号' ,align:'center'}
                        ,{field: 'ssbm', title: '所属部门' ,  align:'center'}


                        ,{templet: '#yyzqz', title: '营运证期止' ,  align:'center'}
                        ,{templet: '#jdcjtsgzrxyxq', title: '交强险期止'    ,align:'center'}
                        ,{templet: '#dszzrxyxq', title: '第三者责任险期止' ,  align:'center'}
                        ,{ title:'操作', align:'center', toolbar: '#opera'}
                    ]]
                    ,done: function(res, curr, count){
                        //得到当前页码
                        console.log(curr);
                        currentPage = curr;
                    }
                });
            }

        });


        table.on('tool(Table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                layer.open({
                    cancel: function(index, layero){
                        var body = layer.getChildFrame('body',index);
                        var faIndex = index;
                        console.log(layero);
                        if(!(body.contents().find("#modiSub3").hasClass("layui-btn-disabled"))){

                            layer.confirm('确定要关闭么?未保存的信息将会丢失!', {icon: 3, title:'提示'}, function(index){
                                //do something
                                layer.close(index);
                                layer.close(faIndex);
                            });
                        }else {
                            layer.close(faIndex);
                        }

                        return false
                    },
                    type: 2,
                    title: '查看车辆信息',
                    maxmin: true,
                    shadeClose: false, //点击遮罩关闭层
                    area : ['80%' , '80%'],
                    content: './lookCarInfo.html',

                    success:function(layero,index){
                        console.log(data);
                        var body = layer.getChildFrame('body',index);

                        for(var i in data){
                            body.contents().find("[name='"+i+"']").val(eval("data."+i));
                        }
                    },
                    end:function(){
                        $.ajax({
                            url: contextPath+"/car",
                            type: "GET",
                            contentType:"application/json;charset=utf-8",
                            dataType:"json",
                            success: function(res) {
                                table.render({
                                    elem: '#table'
                                    ,height:tableheight
                                    ,data:res.list
                                        ,page: {
                                    curr: currentPage //重新从第 1 页开始
                                } //开启分页
                                    ,limit:10
                                    ,cellMinWidth: tablewidth
                                    ,cols: [[ //表头
                                        { type:'numbers', title: '序号',  align:'center'  }
                                        ,{field: 'cph', title: '车牌号' ,align:'center'}
                                        ,{field: 'zgcch', title: '主(挂)车车号',align:'center'}
                                        ,{field: 'dabh', title: '档案编号' ,align:'center'}
                                        ,{field: 'ssbm', title: '所属部门' ,  align:'center'}


                                        ,{templet: '#yyzqz', title: '营运证期止' ,  align:'center'}
                                        ,{templet: '#jdcjtsgzrxyxq', title: '交强险期止'    ,align:'center'}
                                        ,{templet: '#dszzrxyxq', title: '第三者责任险期止' ,  align:'center'}
                                        ,{ title:'操作', align:'center', toolbar: '#opera'}
                                    ]]
                                    ,done: function(res, curr, count){
                                        //得到当前页码
                                        console.log(curr);
                                        currentPage = curr;
                                    }
                                });
                            }

                        });
                    }
                });
            } else if(layEvent === 'delete'){
                layer.confirm('确定删除？', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        url: contextPath+"/car/"+data.clid,
                        type: "DELETE",
                        contentType:"application/json;charset=utf-8",
                        dataType:"json",
                        success: function(res) {
                            layer.msg(res.message);
                            $.ajax({
                                url: contextPath+"/car",
                                type: "GET",
                                contentType:"application/json;charset=utf-8",
                                dataType:"json",
                                success: function(res) {
                                    table.render({
                                        elem: '#table'
                                        ,height:tableheight
                                        ,data:res.list
                                        ,page: {
                                            curr: currentPage //重新从第 1 页开始
                                        } //开启分页
                                        ,limit:10
                                        ,cellMinWidth: tablewidth
                                        ,cols: [[ //表头
                                            { type:'numbers', title: '序号',  align:'center'  }
                                            ,{field: 'cph', title: '车牌号' ,align:'center'}
                                            ,{field: 'zgcch', title: '主(挂)车车号',align:'center'}
                                            ,{field: 'dabh', title: '档案编号' ,align:'center'}
                                            ,{field: 'ssbm', title: '所属部门' ,  align:'center'}


                                            ,{templet: '#yyzqz', title: '营运证期止' ,  align:'center'}
                                            ,{templet: '#jdcjtsgzrxyxq', title: '交强险期止'    ,align:'center'}
                                            ,{templet: '#dszzrxyxq', title: '第三者责任险期止' ,  align:'center'}
                                            ,{ title:'操作', align:'center', toolbar: '#opera'}
                                        ]]
                                        ,done: function(res, curr, count){
                                            //得到当前页码
                                            console.log(curr);
                                            currentPage = curr;
                                        }
                                    });
                                }

                            });
                        }
                    });
                });
            }
        });
        $("#search").on('click',function () {
            console.log(contextPath+"/car?"+"name"+"="+$("#searchSsbm").val()+"&"+"cph="+$("#searchCph").val()+"&"+"zgcch="+$("#searchZgcch").val()+"&"+"dabh="+$("#searchDabh").val());

            $.ajax({
                url: contextPath+"/car?"+"name"+"="+$("#searchSsbm").val()+"&"+"cph="+$("#searchCph").val()+"&"+"zgcch="+$("#searchZgcch").val()+"&"+"dabh="+$("#searchDabh").val(),
                type: "GET",
                contentType:"application/json;charset=utf-8",
                dataType:"json",
                success: function(res) {

                    table.render({
                        elem: '#table'
                        ,height:tableheight
//                    ,url:  contextPath+"/"//数据接口
                        ,data:res.list
                            ,page: {
                                    curr: 1 //重新从第 1 页开始
                                } //开启分页
                        ,limit:10
                        ,cellMinWidth: tablewidth
                        ,cols: [[ //表头
                            { type:'numbers', title: '序号',  align:'center'  }
                            ,{field: 'cph', title: '车牌号' ,align:'center'}
                            ,{field: 'zgcch', title: '主(挂)车车号',align:'center'}
                            ,{field: 'dabh', title: '档案编号' ,align:'center'}
                            ,{field: 'ssbm', title: '所属部门' ,  align:'center'}


                            ,{templet: '#yyzqz', title: '营运证期止' ,  align:'center'}
                            ,{templet: '#jdcjtsgzrxyxq', title: '交强险期止'    ,align:'center'}
                            ,{templet: '#dszzrxyxq', title: '第三者责任险期止' ,  align:'center'}
                            ,{ title:'操作', align:'center', toolbar: '#opera'}
                        ]]
                        ,done: function(res, curr, count){
                        //得到当前页码
                        console.log(curr);
                        currentPage = curr;
                    }
                    });
                }

            });

        });
        $('#newCar').click(function () {
            layer.open({
                cancel: function(index, layero){
                    var faIndex = index;
                    layer.confirm('确定要关闭么?未保存的信息将会丢失!', {icon: 3, title:'提示'}, function(index){
                        //do something
                        layer.close(index);
                        layer.close(faIndex);
                    });
                    return false
                },
                type: 2,
                title: '新增车辆信息',
                maxmin: true,
                shadeClose: false, //点击遮罩关闭层
                area : ['80%' , '80%'],
                content: './newCarinfo.html',
                end:function () {
                    $.ajax({
                        url: contextPath+"/car",
                        type: "GET",
                        contentType:"application/json;charset=utf-8",
                        dataType:"json",
                        success: function(res) {
                            table.render({
                                elem: '#table'
                                ,height:tableheight
                                ,data:res.list
                                    ,page: {
                                    curr: currentPage //重新从第 1 页开始
                                } //开启分页
                                ,limit:10
                                ,cellMinWidth: tablewidth
                                ,cols: [[ //表头
                                    { type:'numbers', title: '序号',  align:'center'  }
                                    ,{field: 'cph', title: '车牌号' ,align:'center'}
                                    ,{field: 'zgcch', title: '主(挂)车车号',align:'center'}
                                    ,{field: 'dabh', title: '档案编号' ,align:'center'}
                                    ,{field: 'ssbm', title: '所属部门' ,  align:'center'}


                                    ,{templet: '#yyzqz', title: '营运证期止' ,  align:'center'}
                                    ,{templet: '#jdcjtsgzrxyxq', title: '交强险期止'    ,align:'center'}
                                    ,{templet: '#dszzrxyxq', title: '第三者责任险期止' ,  align:'center'}
                                    ,{ title:'操作', align:'center', toolbar: '#opera'}
                                ]]
                                ,done: function(res, curr, count){
                                //得到当前页码
                                console.log(curr);
                                currentPage = curr;
                            }
                            });
                        }

                    });
                }
            });
        });

    });





</script>
</body>
</html>